<template>
	<view class="video_player">
		<video 
		class="video" 
		:src="'http://api.com:8000/'+video.src" 
		:loop="true" 
		:controls="false"
		:autoplay="autoplay"
		id="myVideo"
		@click="click"
		></video>
	</view>
</template>

<script>
	var timer=null;
	export default {
		props:['video','index'],
		name:"video-player",
		data() {
			return {
				play:false,
				dblClick:false,
				autoplay:false
			};
		},
		onReady() {
			this.videoContext=uni.createVideoContext('myVideo',this)
		},

		methods:{
			click(){
				clearTimeout(timer)
				this.dblClick=!this.dblClick
				timer=setTimeout(()=>{
					if(this.dblClick){
						// 单击事件
						if(this.play===false){
							this.playThis()
						}else{
							this.pause()
						}
					}else{
						// 双击
						this.$emit('changeClick')
					}
					this.dblClick=false
				},300)
				
			},
			player(){
				if(this.play===false){
					this.videoContext.seek(0)
					this.videoContext.play()
						this.play=true
				}
			},
			pause(){
				if(this.play===true){
					this.videoContext.pause()
					this.play=false
				}
			},
			playThis(){
				if(this.play===false){
					this.videoContext.play()
						this.play=true
				}
			},
			auto(){
				if(this.index===0){
					this.autoplay=true
				}
			}
		},
		created() {
			this.auto()
		},
		watch:{
			video(){
				console.log(this.video)
			}
		}  
		
	}
</script>

<style>
.video_player{
	width: 100%;
	height: 100%;
}
.video{
	width: 100%;
	height: 100%;
}
</style>
